import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_buisiness_2006a/pages/cart/cart_page.dart';
import 'package:flutter_buisiness_2006a/pages/category_page.dart';
import 'package:flutter_buisiness_2006a/pages/home_page.dart';
import 'package:flutter_buisiness_2006a/pages/member/member_page.dart';
import 'package:flutter_buisiness_2006a/provider/current_index_provider.dart';
import 'package:provider/provider.dart';

///AutomaticKeepAliveClientMixin 用于Flutter中保持页面的设置,哪个页面需要保持,就是用with混入这个,类似于实现一个接口
///页面必须得是StatefulWidget
///有两个前置的组件才能保持页面的状态,PageController和IndexedStack
///重写wantKeepAlive的方法,修改为true
///实现的原理就是把页面堆叠成层叠布局,通过隐藏显示的方法来保持页面的状态w
class IndexPage extends StatelessWidget {
  //底部导航栏的Item集合
  final List<BottomNavigationBarItem> bottomTabs = [
    const BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: '首页'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), label: '分类'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), label: '购物车'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), label: '会员中心')
  ];

  //底部导航对应的页面的集合
  final List<Widget> tabBodies = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, //展示动画的方式,底部导航的切换动画
        currentIndex:
            Provider.of<CurrentIndexProvider>(context).currentIndex, //当前页面的下标
        items: bottomTabs, //底部导航栏item的集合
        onTap: (index) {
          Provider.of<CurrentIndexProvider>(context, listen: false)
              .changeIndex(index);
        },
      ),
      body: IndexedStack(
        index: Provider.of<CurrentIndexProvider>(context).currentIndex,
        // children: [HomePage(), CategoryPage(), CartPage(), MemberPage()],
        children: tabBodies,
      ), //展示出当前的页面
    );
  }
}
